import React from 'react';
import track from 'utils/track';
import { Balloon } from '@teamix/ui';
import intl from '../../../locale';

const SurveyElement = () => {
  const style = {
    height: 24,
    background: 'linear-gradient(to right, #8750FF, #69CEFF)',
    borderRadius: 20,
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 12,
    padding: '4px 12px 4px 0',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
  };

  return (
    <Balloon.Tooltip
      popupStyle={{
        maxWidth: 340,
      }}
      trigger={
        <div
          style={style}
          onClick={() => {
            track({
              action: 'read_experience_research',
              page: 'Ceiling',
              type: '',
              control: '',
            });
          }}
        >
          <img
            style={{
              height: 24,
              padding: 1,
            }}
            src="https://img.alicdn.com/tfs/TB1dsoSgypE_u4jSZKbXXbCUVXa-30-30.svg"
          />
          {intl.get({
            id: 'code-assets.initNavigation.question.ExperienceLens',
            defaultMessage: '体验透镜',
          })}
        </div>
      }
    >
      {intl.get({
        id: 'code-assets.initNavigation.question.ComeAndGiveFeedbackOn',
        defaultMessage: '快来反馈对本产品的看法，你的意见非常重要！',
      })}
    </Balloon.Tooltip>
  );
};

export default SurveyElement;
